<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aos页面滚动动画插件使用方法</title>
    <link rel="stylesheet" href="modelCss/reset.css">
    <link rel="stylesheet" href="modelCss/aos.css">
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            text-align: center;
            line-height: 100px;
            margin: 200px auto;
        }

        .box1 {
            background: pink;
        }

        .box2 {
            background: red;
        }

        .box3 {
            background: greenyellow;
        }

        .box4 {
            background: palegoldenrod;
        }

        .box5 {
            background: palegreen;
        }

        .box6 {
            background: paleturquoise;
        }

        .box7 {
            background: palevioletred;
        }

        .box8 {
            background: papayawhip;
        }

        .box9 {
            background: peru;
        }
    </style>
</head>

<body>
    <div class="box1" data-aos="fade-up">box1</div>
    <div class="box2" data-aos="fade-down">box2</div>
    <div class="box3" data-aos="fade-right">box3</div>
    <div class="box4" data-aos="fade-left">box4</div>
    <div class="box5" data-aos="fade-up-right">box5</div>
    <div class="box6" data-aos="fade-up-left">box6</div>
    <div class="box7" data-aos="fade-down-right">box7</div>
    <div class="box8" data-aos="fade-down-left">box8</div>

    <div class="box9" data-aos="flip-left">box9</div>
    <div class="box4" data-aos="flip-right">box10</div>
    <div class="box5" data-aos="flip-up">box11</div>
    <div class="box6" data-aos="flip-down">box12</div>

    <div class="box7" data-aos="zoom-in">box13</div>
    <div class="box8" data-aos="zoom-in-up">box14</div>
    <div class="box9" data-aos="zoom-in-down">box15</div>
    <div class="box4" data-aos="zoom-in-left">box16</div>
    <div class="box5" data-aos="zoom-in-right">box17</div>
    <div class="box6" data-aos="zoom-out">box18</div>
    <div class="box7" data-aos="zoom-out-up">box19</div>
    <div class="box8" data-aos="zoom-out-down">box20</div>
    <div class="box9" data-aos="zoom-out-right">box21</div>
    <div class="box4" data-aos="zoom-out-left">box22</div>

    <div class="box5" data-aos="fade-up" data-aos-duration="3000">box23</div>
    <div class="box6" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500">box24</div>
    <div class="box7" data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in-sine">box25</div>
    <div class="box8" data-aos="fade-left" data-aos-anchor="#example-anchor" data-aos-offset="500"
        data-aos-duration="500">box26</div>
    <div class="box9" data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0">
        box27</div>
    <div class="box4" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000">box28</div>


    <div class="box5" data-aos="fade-up" data-aos-anchor-placement="top-bottom">box29</div>
    <div class="box6" data-aos="fade-up" data-aos-anchor-placement="center-bottom">box30</div>
    <div class="box7" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">box31</div>
    <div class="box8" data-aos="fade-up" data-aos-anchor-placement="top-center">box32</div>
    <div class="box9" data-aos="fade-up" data-aos-anchor-placement="center-center">box33</div>
    <div class="box9" data-aos="fade-up" data-aos-anchor-placement="bottom-center">box34</div>
</body>

</html>
<script src="js/aos.js"></script>
<script>
    AOS.init();
</script>